<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
    <title>保 养</title>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>

</head>
<style>
    body{
        font-family: SimHei,"微软雅黑",sans-serif;
    }
    .content-items li{
        list-style: none;
        float: left;
        padding: 4px 8px;
        margin: 5px;
        border: 1px #ededed solid;
        cursor: pointer;
        font-weight: 700;
        color: #666;
    }
</style>
<body>

<nav class="mui-bar mui-bar-tab jiesuan">
    <!--<div class="jiesuan_2">-->
        <!--<span class="mui-icon mui-icon-phone">-->
            <!--<p>客服</p>-->
        <!--</span>-->
    <!--</div>-->
    <div class="jiesuan_3" id="order">去预约</div>
</nav>
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">服务项目</h1>
</header>
<nav th:id="pro" class="mui-bar mui-bar-tab" style="display: none">
    <div class="content-items">
        <ul th:each="province:${province}">
            <li th:text="${province.dictname}" th:onclick="'javascript:choocepro(\''+${province.dictname}+'\')'">粤</li>
        </ul>
    </div>
</nav>
<div class="mui-content">
    <div class="weui-panel weui-panel_access" style="border-bottom:1px solid #999">
        <div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999;padding:10px 5px;">
            <div class="weui-flex__item" style="flex-grow: 1;padding: 3px 5px">
                <img style="width: 50px;height: 50px" class="weui-media-box__thumb" th:src="'/img/caricon/'+${custcar.brandlogo}"/>
            </div>
            <div class="weui-flex__item" style="flex-grow: 10;">
                <h4 class="weui-media-box__title" th:text="${custcar.carfactname}+' '+${custcar.carlinename}"></h4>
                <p class="weui-media-box__desc">
                    <span th:text="${custcar.carvol}"></span>
                    <span th:text="${custcar.caryear}+'年'"></span>
                </p>
            </div>
            <div class="weui-flex__item" style="flex-grow: 4;">
                <div class="weui-cell weui-cell_access" href="javascript:;" style="padding: 5px 5px">
                    <div class="weui-cell__bd">
                        <p style="font-size: 18px;color: black;padding-bottom: 4px" id="carpro" onclick="showpro()">粤</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="text" id='carno1' th:onchange="'javascript:savecarno()'" style="border: none;width:66px;margin:0;padding:0;text-align: right;" maxlength="6" placeholder="车牌号"/>
                    </div>
                    <input id="custcarid" type="hidden" th:value="${custcar.custcarid}"/>
                </div>
            </div>
            <input type="hidden" th:value="${custcar.carno}" th:id="carno"/><!--存储读取的车牌号码-->
        </div>
        <div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999">
            <div class="weui-flex__item" style="border-right:1px solid #999">
                <div class="weui-cell weui-cell_access" style="padding:5px 5px">
                    <div class="weui-cell__bd">
                        <p>里程</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="text" id='kmpicker' style="border: none;width:82px;margin:0;padding:0" readonly="readonly"/>
                        <input type="hidden" id='km' th:value="${custcar.curkilo}"/>
                        <span  id="ppp" style="font-size: 12px">KM</span>
                    </div>
                </div>
            </div>
            <div class="weui-flex__item ">
                <div class="weui-cell weui-cell_access" style="padding: 5px 3px">
                    <div class="weui-cell__bd">
                        <p>上路时间</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input id="datesel" type="text" data-toggle="date" th:value="${custcar.regdate}" style="border: none;width:95px;margin:0;padding:0px" readonly="readonly"/>
                    </div>
                </div>
            </div>
        </div>
        <div th:if="${custcar==null}">
            <a th:if="${custid!=null}" style="border-bottom:1px solid #999" class="weui-cell weui-cell_access" th:href="@{/person/addcar(flag=1,busiid=${busiid})}">
                <div class="weui-cell__bd">
                    <p class="fff" th:data="1">您还没有选择默认车型</p>
                </div>
                <div class="weui-cell__ft">
                    <p>请选择</p>
                </div>
            </a>
            <a th:if="${custid==null}" class="weui-cell weui-cell_access" th:href="@{/person/login(flag=1,busiid=${busiid})}" style="border-bottom:1px solid #999">
                <div class="weui-cell__bd">
                    <p class="fff" th:data="0">您还没有登录</p>
                </div>
                <div class="weui-cell__ft">
                    <p>请登录</p>
                </div>
            </a>
        </div>
        <div class="weui-panel__bd">
            <div class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>已选<span id="itemsel">0</span>个服务项目(共<span id="itemnum" th:text="${count.num}"></span>个项目)</p>
                </div>
            </div>
        </div>
    </div>
    <div th:each="list2:${list2}">
        <div class="weui-cells__title" th:text="${list2.dictname}"></div>
        <div th:each="list1:${list1}">
            <ul th:if="${list2.belongcode==list1.belongcode}" class="mui-table-view mui-table-view-chevron total">
                <li class="mui-table-view-cell mui-collapse">
                    <a class="suc" href="#" th:data="${list1.packid}">
                        <div class="weui-flex">
                            <div class="circle">
                                <span class="weui-icon-circle" ></span>
                            </div>
                            <div class="weui-flex__item" >
                                <label th:text="${list1.packname}"></label>
                                <p th:text="${list1.remark}"></p>
                            </div>
                        </div>
                    </a>
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li th:each="list:${list}" th:if="${list.packid==list1.packid}" class="mui-table-view-cell" style="padding-right: 0">
                            <!--<img th:src="@{/img/by/jiyou.png}" />-->
                            <div class="shop" th:data="${list.servitemid}">
                                <div class="weui-flex">
                                    <div class="weui-flex__item" style="flex-grow: 3">
                                        <p th:text="${list.servitemname}"></p>
                                        <!--<p>全合成</p>-->
                                        <!--<p>¥<span class="price">328.00</span></p>-->
                                        <p>价格详情选中门店以后确定</p>
                                    </div>
                                    <div class="weui-flex__item" style="flex-grow: 1;position: relative">
                                        <span class="fa fa-trash" style="margin-right: 10px;float: right"></span>
                                        <div class="weui-count" style="float: right;bottom: 0px;right: 10px;position: absolute">
                                            <a class="weui-count__btn weui-count__decrease"></a>
                                            <span>x</span><span class="num">1</span>
                                            <a class="weui-count__btn weui-count__increase"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<input id="busiid" type="hidden" th:value="${busiid}"/>

<link rel="stylesheet" type="text/css" th:href="@{/css/shopcss/shopdetail.css}" />
<script th:inline="javascript">
    /*<![CDATA[*/
    //选择项目
    mui(".mui-collapse").on('tap', '.suc', function(event){
        var id=$(this).find(".circle").children(":eq(0)").attr('class');
        if(id=="weui-icon-circle")
        {
            var flag=true;
            $(this).parent().find(".shop").each(function () {//查找是否有重复的项目
                var sid=$(this).attr('data');
                $(".total").each(function () {
                    var circle= $(this).find(".circle").children(":eq(0)").attr('class');
                    if(circle=="weui-icon-success")
                    {
                        $(this).find(".shop").each(function () {
                            var sid1=$(this).attr('data');
                            if(sid1==sid){
                                var ot=$(this).closest(".total");//该total为找到的重复项目
                                ot.find(".circle").children(":eq(0)").attr('class','weui-icon-circle');//取消之前已选中的分组
                                ot.children().removeClass('mui-active');
                                flag=false;
                                return flag;
                            }
                        });
                    }
                    return flag;
                });
                return flag;
            });
            $(this).find(".circle").children(":eq(0)").attr('class',"weui-icon-success");
        }
        if(id=="weui-icon-success")
        {
            $(this).find(".circle").children(":eq(0)").attr('class',"weui-icon-circle");
        }
        count()
    });

    //计算被选中项目的总金额(选中门店以后再确定)以及数量
    function count() {
        var storage=window.localStorage;
        var array=new Array();
        var i=0;
//        var total=0;
        //得到被选中的项目
        $(".total").each(function () {
            var circle=$(this).find(".circle").children(":eq(0)").attr('class');
            if(circle=="weui-icon-success")
            {
                $(this).find(".shop").each(function () {
                    var packid=$(this).closest('.total').find('.suc').attr('data');
                    var dis=$(this).parent().css('display');
                    if(dis!='none'){
                        var num = $(this).find(".num").text();
                        var data=$(this).attr('data');
                        array.push(packid);
                        array.push(data);
                        array.push(num);
//                        var price = $(this).find(".price").text();
//                        total+=parseFloat(price)*parseFloat(num);
                        i++;
                    }
                });
            }
        });
//        $("#totalprice").text(total);
        $("#itemsel").text(i);
        storage.setItem("item",array);
    }

    $(document).ready(function () {
        //加载行驶里程
        var km = $("#km").val();
        if(km!=null){
            km=km.split("");
            var kmp="";
            for(var i=0;i<6-km.length;i++){
                kmp+="0 ";
            }
            for(var j=0;j<km.length;j++){
                kmp+=km[j]+" ";
            }
            var storage=window.localStorage;
            var kmpload=storage.getItem("kmp");
            if(kmpload==kmp||kmpload==null){
                loadkm(kmp);
            } else {
                loadkm(kmpload);
            }
        }
        //加载已选项目
        loadselitem();
        /*分割车牌赋值*/
        var carno=$("#carno").val();
        if(carno!=""&&carno!=null){
            var carpro=carno.substring(0,1);
            var carnum=carno.substring(1);
            $("#carpro").text(carpro);
            $("#carno1").val(carnum);
        }
    });

    //计数器
    $(".weui-count__increase").click(function () {
        var num=$(this).parent().find(".num").text();
        var number = parseInt(num || "0") + 1;
        $(this).parent().find(".num").text(number);
        count()
    });
    $('.weui-count__decrease').click(function () {
        var num=$(this).parent().find(".num").text();
        var number = parseInt(num || "0") - 1;
        if(number==0){
            number=1;
        }
        $(this).parent().find(".num").text(number);
        count()
    });

    //删除项目(将该项目隐藏)
    $(".fa-trash").click(function () {
//        $(this).parent().parent().parent().parent().remove();
        $(this).closest('.mui-table-view-cell').css('display','none');
        count();
       var flag=true;//用于判断是否所有项目都删除了
        $(this).closest('.mui-table-view-chevron').children().each(function () {
           var d=$(this).css('display');
           if(d=='list-item'){
               flag=false;
           }
       });
        if(flag){
            var t=$(this).closest(".total");
            t.find('.circle').children(":eq(0)").attr('class','weui-icon-circle');
            t.children().removeClass("mui-active");
            t.find('.mui-table-view-chevron').children().each(function () {
                $(this).css('display','');
            })
        }
    });

    //日期选择器
    $("#datesel").calendar({
        dateFormat:"yyyy-mm-dd",
        onClose:function () {
            var date=$("#datesel").val();
            mui.ajax('/item/updatedate',{
                data:{
                    date:date
                },
                type:'get',//HTTP请求类型
                success:function(data){
                    $.toptip('更新成功',1000, 'success');
                }
            })
        }
    });

    //预约
    $("#order").click(function () {
        var fff=$(".fff").attr('data');
        if(fff==0){
            $.alert("请先登录");
            var busiid=$("#busiid").val();
//            location.href="/person/login?flag=1&busiid="+busiid;
        } else if(fff==1){
            $.alert("请先选择默认车型");
        } else {
            var itemsel = $("#itemsel").text();
            if (itemsel == 0) {
                $.alert("请选择至少一个项目进行预约");
            } else {
                if ($("#carno1").val() == '') {
                    $.alert("请先填写车牌号");
                } else {
                    if ($("#datesel").val() == '') {
                        $.alert("请先选择上路时间");
                    } else {
                        var data = "";//数据
                        var itemnum = "";//数量
                        $(".total").each(function () {
                            var circle = $(this).find(".circle").children(":eq(0)").attr('class');
                            if (circle == "weui-icon-success") {
                                var gid = $(this).find(".suc").attr('data');//获得项目分组id
                                data += ";" + gid;
                                $(this).find(".shop").each(function () {
                                    var dis = $(this).parent().css('display');
                                    if (dis != 'none') {
                                        var itemid = $(this).attr('data');//获得项目id
                                        var num = $(this).find(".num").text();//项目数量
                                        data += "," + itemid;
                                        itemnum += "" + num;
                                    }
                                })
                            }
                        });
                        var storage = window.localStorage;
                        storage.clear();
//           location.href="/shoplist?data="+data+"&amp;km="+km+"&amp;date="+date;
                        var busiid=$("#busiid").val();
                        var params = {
                            "data": data,
                            "itemnum": itemnum,
                            "itemsel": itemsel,
                            "busiid": busiid
                        };
                        httpPost('/shoplist', params)//post提交到后台
                    }
                }
            }
        }
    });

    function loadkm(kmp) {
        $("#kmpicker").val(kmp);
        $("#kmpicker").picker({
            title: "请选择行驶里程",
            cols: [
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                }
            ],
            onClose:function () {
                var kmp=$("#kmpicker").val();
                var km=kmp.replace(/\s+/g,"");
                mui.ajax('/item/updatekm',{
                    data:{
                        km:km
                    },
                    type:'get',//HTTP请求类型
                    success:function(data){
                        $.toptip('更新成功',1000, 'success');
                        var storage=window.localStorage;
                        storage.setItem("kmp",kmp);
                    }
                })
            }
        });
    }

    //通过localStorage加载已选服务项目
    function loadselitem() {
        var storage=window.localStorage;
        var item=storage.getItem("item");
        console.log(item);
        if(item!=''&&item!=null) {
            var it = item.split(',');
            for (var i = 0; i < it.length; i++) {
                var flag = true;
                $(".suc").each(function () {
                    if (flag) {
                        var data = $(this).attr('data');//分组编号
                        if (data == it[i]) {
                            $(this).find(".circle").children(":eq(0)").attr('class', 'weui-icon-success');
                            $(this).closest('.total').children(":eq(0)").addClass("mui-active");
                            $(this).closest('.total').addClass('pack');
                            $(this).closest('.total').find('.shop').each(function () {
                                var itemid = $(this).attr('data');
                                if (itemid == it[i + 1]) {
                                    $(this).addClass('pick');
                                    $(this).find('.num').text(it[i + 2]);
                                    i += 2;
                                    flag = false;
                                }
                            });
                        }
                    }
                });
            }
            $(".pack").each(function () {
                $(this).find('.shoptotal').each(function () {
                    var cla = $(this).find('.shop').attr('class');
                    if (cla == 'shop pick') {

                    } else {
                        $(this).css('display', 'none');
                    }
                })
            });
            count()
        }
    }

    //post提交
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }

    /*弹出车牌的省份*/
    function showpro() {
        $("#pro").removeAttr("style");
    }
    /*选择车牌省份后赋值过去*/
    function choocepro(province) {
        $("#carpro").text(province);
        $('#pro').attr("style","display:none");
        savecarno();
    }
    /*输入车牌号ajax存储*/
    function savecarno() {
        var carpro=$("#carpro").text();
        var carno=$("#carno1").val();
        var flag=carpro+carno;
        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        var result = express.test(flag);
         if(result==false){
             $.alert('请输入正确的车牌号!')
         } else {
             mui.ajax('/person/savecarno',{
                 data:{
                     carno:carpro+carno,
                     custcarid:$("#custcarid").val()
                 },
                 type:'get',//HTTP请求类型
                 success:function(data){
                     if(data=='success'){
                         $.toptip('更新成功', 'success');
                     }else {
                         $.toptip('操作失败', 'error');
                     }
                 }
             })
         }
    }

    $(".mui-icon-left-nav").click(function () {
        location.href="/indexs"
    })
    /*]]>*/
</script>

</body>

</html>